<?php

// start the session
session_start();

// start buffering the output
ob_start();

// require the database and login libraries
require_once("database.php");
require_once("liblogin.php");

?>

<html>
<head>

<title>UC Irvine | Professor Assignment System - Manage Courses</title>

<link rel="stylesheet" href="css/general.css" />
<link type="text/css" href="css/custom-theme/jquery-ui-1.8.custom.css" rel="stylesheet" />	
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>

</head>

<body>

<?php echo createFixedMenu(); ?>

<div id="manageCourseDialog" class="classDialogText">
	<form name="manageCourseForm" id="manageCourseForm">
	<input type="hidden" id="courseID" value="1" />
		<table border="0">
			<tr><td align="right" class="classDialogText"><b>Name:</b></td><td align="left" class="classDialogText"><input type="text" name="courseName" id="courseName" size="20" value="" onClick="if($(this).val() == 'Intro to.../Project in.../Seminar in...') {$(this).attr('value','');}" /></td></tr>
			<tr><td align="right" class="classDialogText"><b>Department:</b></td><td align="left" class="classDialogText">
				<select name="courseDept" id="courseDept">
					
				<?php
				
					// Dynamically generate the list of course departments
					$departments = getDepartments();
					
					for($i = 0; $i < sizeof($departments); $i++)
					{
						// generate the initial "option" portion with the department ID
						echo "<option value=\"" . $departments[$i]['DepartmentID'] . "\"";
						
						if($i == 0)
						{
							// make sure the first result is selected by default
							echo " selected=\"selected\"";
						}
						
						// generate the displayable text with the department ID
						echo ">" . $departments[$i]['DepartmentID'] . "</option>";
					}
				
				?>
					
				</select>
			</td</tr>
			<tr><td align="right" class="classDialogText"><b>Number:</b></td><td align="left" class="classDialogText"><input type="text" name="courseNum" id="courseNum" size="4" /></td></tr>
			<tr><td align="right" class="classDialogText"><b>Type:</b></td><td align="left" class="classDialogText">
				<select name="courseType" id="courseType">
				
				<?php
				
					// Dynamically generate the list of class types
					$classTypes = getClassTypes();
					
					for($i = 0; $i < sizeof($classTypes); $i++)
					{
						// generate the initial "option" portion with the class type
						echo "<option id=\"courseTypeItem\" value=\"" . $classTypes[$i]['ClassType'] . "\"";
						
						if($i == 0)
						{
							// make sure the first result is selected by default
							echo " selected=\"selected\"";
						}
						
						// generate the displayable text with the class type name
						echo ">" . $classTypes[$i]['ClassTypeName'] . "</option>";
					}
				
				?>
				
				</select>
			</td</tr>
			<tr><td align="right" class="classDialogText"><b>Students:</b></td><td align="left" class="classDialogText"><input type="text" name="courseStudents" id="courseStudents" size="4" /></td></tr>
			<tr><td align="right" class="classDialogText" valign="top"><b>Notes:</b></td><td align="left" class="classDialogText"><textarea name="courseNotes" id="courseNotes" rows="5" cols="20"></textarea></td></tr>
		</table><br />
		<input type="button" name="submitButton" id="addCourseButton" value="Add Course" onClick="addCourse()" />
		<input type="button" name="submitButton" id="updateCourseButton" value="Update Course" onClick="updateCourse()" style="display:none" />
	</form>
</div>

<div style="width:400px;margin-left:auto;margin-right:auto;text-align:center">

<h3>Manage Courses</h3>

<div onClick="showAddCourseDialog()" style="cursor:pointer;color:blue"><span class="ui-icon ui-icon-plus" style="float:left"></span><span style="float:left">Add Course</span></div><br /><br />

</div>

<div id="manageCoursesContainer" style="width:450px;height:400px;overflow:auto;margin-left:auto;margin-right:auto;">

<?php

// spit out all the classes from the database
$classes = getClassList();

// display each class
foreach($classes as $class)
{
	generateCourseItemDisplay($class);
}

?>

</div>

<?php include("includes/footer.php"); ?>

<script type="text/javascript">

function deleteCourse(id, code)
{
	var result = confirm("Are you sure you want to delete " + code + "?");
	
	if(result == true)
	{
		// delete the course
		$("#course" + id).fadeOut('slow', function() {
			$("#course" + id).remove(); // delete the list item from the DOM
			$("#course" + id + "info").remove(); // delete the drop-down info from the DOM
			
			// delete from the database with an AJAX call
			$.ajax({
			   type: "POST",
			   url: "process.php",
			   data: "formName=deleteCourse&courseID=" + id,
			   success: function(msg){}
			 });
		});
	}
}

// add a course to the database
function addCourse()
{
	var courseName = $("#courseName").attr("value");
	var courseDept = $("#courseDept").attr("value");
	var courseNum = $("#courseNum").attr("value");
	var courseType = $("#courseType").attr("value");
	var courseStudents = $("#courseStudents").attr("value");
	var courseNotes = $("#courseNotes").attr("value");
	
	// check to make sure that nothing crucial is empty
	var errors = "";
	if(courseName == "") {errors += "* Please enter the Course Name\n";}
	if(courseDept == "") {errors += "* Please enter the Course Department\n";}
	if(courseType == "") {errors += "* Please enter the Course Type\n";}
	if(courseNum == "") {errors += "* Please enter a number for the Course Number\n";}
	if(courseStudents == "") {errors += "* Please enter a number for Students\n";}
	
	// something is missing, so inform the user
	if(errors != "")
	{
		alert("Please fix the following errors:\n\n" + errors);
		
		return;
	}
	
	// close the dialog
	$("#manageCourseDialog").dialog("close");
	
	// send an AJAX request to add the course data
	$.ajax({
	   type: "POST",
	   url: "process.php",
	   data: "formName=addCourse&courseName=" + courseName + "&courseDept=" + courseDept + "&courseNum=" + courseNum + "&courseType=" + courseType + "&courseStudents=" + courseStudents + "&courseNotes=" + courseNotes,
	   success: function(html)
	   {	
			// add the course to the list of courses on the page with a nice fade effect
			$("#manageCoursesContainer").append(html);
			$("#manageCoursesContainer div:last").css("display","none").fadeIn(800);
	   }
	});
}

// update a course in the database
function updateCourse()
{
	var id = $("#courseID").attr("value");
	var courseName = $("#courseName").attr("value");
	var courseDept = $("#courseDept").attr("value");
	var courseNum = $("#courseNum").attr("value");
	var courseType = $("#courseType").attr("value");
	var courseStudents = $("#courseStudents").attr("value");
	var courseNotes = $("#courseNotes").attr("value");
	
	// check to make sure that nothing crucial is empty
	var errors = "";
	if(courseName == "") {errors += "* Please enter the Course Name\n";}
	if(courseDept == "") {errors += "* Please enter the Course Department\n";}
	if(courseType == "") {errors += "* Please enter the Course Type\n";}
	if(courseNum == "") {errors += "* Please enter a number for the Course Number\n";}
	if(courseStudents == "") {errors += "* Please enter a number for Students\n";}
	
	// something is missing, so inform the user
	if(errors != "")
	{
		alert("Please fix the following errors:\n\n" + errors);
		return;
	}
	
	// close the dialog
	$("#manageCourseDialog").dialog("close");
	
	// send an AJAX request to add the course data
	$.ajax({
	   type: "POST",
	   url: "process.php",
	   data: "formName=editCourse&courseID=" + id + "&courseName=" + courseName + "&courseDept=" + courseDept + "&courseNum=" + courseNum + "&courseType=" + courseType + "&courseStudents=" + courseStudents + "&courseNotes=" + courseNotes,
	   success: function(msg)
	   {	
			// update the display fields
			$("#course" + id + "code").html(courseDept + " " + courseNum);
			$("#course" + id + "info").html("<b>Name:</b> " + courseName + "<br /><b>Type:</b> " + $("#courseType option:selected").text() + "<br /><b>Students:</b> " + courseStudents + "<br /><b>Notes:</b> " + courseNotes);
			
			// update the hidden fields
			$("#course" + id + "ItemName").attr("value", courseName);
			$("#course" + id + "ItemDept").attr("value", courseDept);
			$("#course" + id + "ItemNum").attr("value", courseNum);
			$("#course" + id + "ItemType").attr("value", $("#courseType option:selected").text());
			$("#course" + id + "ItemStudents").attr("value", courseStudents);
			$("#course" + id + "ItemNotes").attr("value", courseNotes);
			
			// show which course was updated
			$("#course" + id).fadeOut(500);
			$("#course" + id).fadeIn(500);
	   }
	});
}

// show the "Add Course" dialog box
function showAddCourseDialog()
{
	// clear the dialog and assign default values
	$("#courseName").attr("value", "Intro to.../Project in.../Seminar in...");
	$("#courseDept").attr("value", "IN4MATX");
	$("#courseNum").attr("value", "132");
	$("#courseType").attr("value", "UGrad");
	$("#courseStudents").attr("value", "30");
	$("#courseNotes").attr("value", "");
	
	// show the "Add Course" and hide the "Update Course" button
	$("#addCourseButton").show();
	$("#updateCourseButton").hide();
	
	// set up the display of the "Add Course" dialog
	$("#manageCourseDialog").dialog({ autoOpen: false, title: 'Add Course', resizable: false, height: 300 });
	
	// show the dialog
	$("#manageCourseDialog").dialog("open");
}

// show the "Edit Course" dialog box
function showEditCourseDialog(id)
{	
	$("#courseName").attr("value", $("#course" + id + "ItemName").attr("value"));
	$("#courseDept").attr("value", $("#course" + id + "ItemDept").attr("value"));
	$("#courseNum").attr("value", $("#course" + id + "ItemNum").attr("value"));
	$("#courseType").attr("value", $("#course" + id + "ItemType").attr("value"));
	$("#courseStudents").attr("value", $("#course" + id + "ItemStudents").attr("value"));
	$("#courseNotes").attr("value", $("#course" + id + "ItemNotes").attr("value"));
	
	// apply the ID to the dialog
	$("#courseID").attr("value", id);
	
	// show the "Edit Course" and hide the "Add Course" button
	$("#addCourseButton").hide();
	$("#updateCourseButton").show();
	
	// set up the display of the "Edit Course" dialog
	$("#manageCourseDialog").dialog({ autoOpen: false, title: 'Edit Course', resizable: false, height: 300 });
	
	// show the dialog
	$("#manageCourseDialog").dialog("open");
}

$(function() {
	// set up the display of the "Add Course" dialog
	$("#manageCourseDialog").dialog({ autoOpen: false, title: 'Add Course', resizable: false, height: 300 });
});

</script>

</body>

</html>

<?php

// print out the buffer
ob_end_flush();

?>